<!--
 * @author hugh
 * @time  2021-01-10 11:40
 * @title  上传
 * @desc
 -->
<template>
  <!--  <el-upload class="avatar-uploader" action="https://file-api..vip/uploads" :data="uploadData" :headers="headers"
    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
    <el-button size="small" type="primary">点击上传</el-button>
    <div>
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </div>
  </el-upload> -->
  <div>
    <div>
      <img v-if="imageUrl" :src="imageUrl" style="width: 6.25rem;height: 6.25rem;" @click="selectImage">
      <i v-else class="el-icon-plus avatar-uploader-icon" @click="selectImage"></i>
    </div>
  </div>

</template>

<script lang="ts">
  import {
    defineComponent,
    toRefs,
    reactive,
    getCurrentInstance,
    ref,
    Ref
  } from 'vue';
  import {
    selectFile
  } from '../utils/md5'
  let upload = require('../utils/upload');
  export default defineComponent({
    name: 'uploader',
    props: {
      src: String
    },
    emits: ['onchange'],
    setup(props, {
      emit
    }) {
      //绑定挂载全局对象
      const {
        proxy
      } = getCurrentInstance() as any;

      const data = reactive({
        imageUrl: props.src,
        uploadData: {
          uniqueFileName: '',
          file: File,
          upload_key: '',
          ext: 'jpg',
          status: 'md5Check',
          name: '',
          filesize: '',
          md5: '',
          fileoldname: '',
          chunks: 1,
          category: '',
          channel: '',
          userId: 0
        },
        headers: {
          clientId: '10000',
          appId: '10000',
          appKey: 'gPV3jpude7yhGycxAt3h2pcgh0DRL8Y9',
          isJwt: true
        }
      });

      function handleAvatarSuccess(res: any, file: any) {
        data.imageUrl = URL.createObjectURL(file.raw);
        emit('onchange', data.imageUrl);
      }

      function beforeAvatarUpload(file: any) {
        const isJPG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          proxy.$msg('上传头像图片只能是 png 格式!', 0);
        }
        if (!isLt2M) {
          proxy.$msg('上传头像图片大小不能超过 2MB!', 1);
        }
        return isJPG && isLt2M;
      }


      async function selectImage() {

        const file = await selectFile()
        // console.info(fileTag);
        upload.upFile(file, 'image').then((res: any) => {
          console.info("上传图片返回信息:",res);
          data.imageUrl = res.source;
          emit('onchange', data.imageUrl);
          console.log(res.source)
        }).catch((err: any) => {
          console.log(err)
        })


      }
      //包装参数列表
      const refData = toRefs(data);
      return {
        ...refData,
        beforeAvatarUpload,
        handleAvatarSuccess,
        selectImage
      }
    }
  })
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 6.25rem;
    height: 6.25rem;
    line-height: 6.25rem;
    text-align: center;
    border: 1px solid #c6c6c6;
  }

  .avatar {
    width: 6.25rem;
    height: 6.25rem;
    display: block;
  }
</style>
